<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground Station</title>
    <style>
        /* CSS样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f5ff; /* 蓝白风格背景色 */
        }
        .navbar {
            background-color: #333; /* 导航栏背景色 */
            overflow: hidden;
            text-align: center; /* 居中导航栏内容 */
        }
        .navbar h1 {
            color: white;
            display: inline-block;
            vertical-align: middle;
        }
        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 17px;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
        .container {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #ffffff; /* 白色背景 */
        }
        #commandLine {
            padding: 10px;
            margin-top: 20px;
            background-color: #eee; /* 命令行窗口背景色 */
        }
        #commandInput {
            width: calc(100% - 22px); /* 输入框宽度 */
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #commandButton {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #5cb85c;
            color: white;
            cursor: pointer;
        }
        #commandButton:hover {
            background-color: #4cae4c;
        }
        .status {
            font-weight: bold;
            color: green;
        }
        .flex-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .flex-item {
            flex: 1;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        @media (max-width: 768px) {
            .flex-container {
                flex-direction: column;
            }
        }
        .navbar h1{
            color: white;
            horiz-align: center;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="navbar">
    <h1>卫星端调试专用</h1>
    <a href="#" onclick="showSatelliteResources()">卫星资源状态</a>
    <a href="#" onclick="showContainerStatus()">容器运行状态</a>
    <a href="#" onclick="showLogView()">日志查看</a>
    <div id="connectionStatus" style="float: right; color: white; padding: 14px 20px;">通信链接：正常</div>
</div>

<div id="mainContent">
    <!-- 这里将会显示主界面内容 -->
</div>

<!-- 简易命令行窗口 -->
<div id="commandLine">
    <input type="text" id="commandInput" placeholder="输入调试命令...">
    <button id="commandButton" onclick="executeCommand()">执行</button>
</div>

<script>
    // JavaScript代码
    // 默认显示卫星资源状态
    showSatelliteResources();

    // 显示卫星资源状态
    function showSatelliteResources() {
        document.getElementById('mainContent').innerHTML = `
                <div class="container">
                    <h2>卫星资源使用状态</h2>
                    <table id="satelliteResourcesTable">
                        <thead>
                            <tr>
                                <th>节点</th>
                                <th>CPU 使用率</th>
                                <th>内存使用量</th>
                                <th>硬盘使用量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>节点1</td>
                                <td class="cpu-usage"></td>
                                <td class="memory-usage"></td>
                                <td class="disk-usage"></td>
                            </tr>
                            <tr>
                                <td>节点2</td>
                                <td class="cpu-usage"></td>
                                <td class="memory-usage"></td>
                                <td class="disk-usage"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            `;
        // 更新卫星资源状态数据
        updateSatelliteResources();
    }

    // 更新卫星资源状态数据
    function updateSatelliteResources() {
        const jsonData = [
            {
                "id": "node1",
                "cpu_usage": 0.75,
                "memory_usage": "0.5GB",
                "disk_usage": "0.4GB"
            },
            {
                "id": "node2",
                "cpu_usage": 0.6,
                "memory_usage": "0.7GB",
                "disk_usage": "0.5GB"
            }
        ];

        jsonData.forEach(node => {
            const nodeRow = document.querySelector(`#satelliteResourcesTable tbody tr:nth-child(${jsonData.indexOf(node) + 1})`);
            nodeRow.querySelector('.cpu-usage').textContent = `${(node.cpu_usage * 100).toFixed(2)}%`;
            nodeRow.querySelector('.memory-usage').textContent = node.memory_usage;
            nodeRow.querySelector('.disk-usage').textContent = node.disk_usage;
        });

        // 以每秒一次的频率更新数据
        setInterval(() => {
            // 模拟更新数据
            jsonData.forEach(node => {
                node.cpu_usage = Math.random();
                node.memory_usage = (Math.random() * 2).toFixed(1) + "GB"; // Simulate memory usage between 0GB to 2GB
                node.disk_usage = (Math.random() * 2).toFixed(1) + "GB"; // Simulate disk usage between 0GB to 2GB
            });

            jsonData.forEach(node => {
                const nodeRow = document.querySelector(`#satelliteResourcesTable tbody tr:nth-child(${jsonData.indexOf(node) + 1})`);
                nodeRow.querySelector('.cpu-usage').textContent = `${(node.cpu_usage * 100).toFixed(2)}%`;
                nodeRow.querySelector('.memory-usage').textContent = node.memory_usage;
                nodeRow.querySelector('.disk-usage').textContent = node.disk_usage;
            });
        }, 1000);
    }

    // 显示容器运行状态
    function showContainerStatus() {
        document.getElementById('mainContent').innerHTML = `
                <div class="container">
                    <h2>容器运行状态</h2>
                    <table id="containerStatusTable">
                        <thead>
                            <tr>
                                <th>容器ID</th>
                                <th>启停状态</th>
                                <th>对外端口</th>
                                <th>基础镜像</th>
                                <th>部署位置</th>
                                <th>资源开销</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
        </table>
        </div>
        `;
        // 更新容器状态数据
        updateContainerStatus();
    }

    // 更新容器状态数据
    function updateContainerStatus() {
        const jsonData = [
            {
                "id": "3e3befb7691",
                "name": "rabbitmq",
                "status": "running",
                "cpu_usage_percentage": 0.12349755017191463,
                "memory_usage": "0.5GB",
                "memory_limit": "0.5GB",
                "base_image": "rabbitmq:7.0",
                "location": "node1",
                "ports": {
                    "15671/tcp": [
                        { "HostIp": "0.0.0.0", "HostPort": "15671" },
                        { "HostIp": "::", "HostPort": "15671" }
                    ],
                    "5671/tcp": [
                        { "HostIp": "0.0.0.0", "HostPort": "5671" },
                        { "HostIp": "::", "HostPort": "5671" }
                    ]
                }
            }
        ];

        jsonData.forEach(container => {
            const containerRow = document.createElement('tr');

            const idCell = document.createElement('td');
            idCell.textContent = container.id;
            containerRow.appendChild(idCell);

            const statusCell = document.createElement('td');
            statusCell.textContent = container.status;
            containerRow.appendChild(statusCell);

            const portsCell = document.createElement('td');
            let portsText = '';
            for (const port in container.ports) {
                if (container.ports[port] !== null) {
                    portsText += `${port} (${container.ports[port].length} binding(s)), `;
                } else {
                    portsText += `${port} (Not bound), `;
                }
            }
            portsText = portsText.slice(0, -2); // Remove the trailing comma and space
            portsCell.textContent = portsText;
            containerRow.appendChild(portsCell);

            const imageCell = document.createElement('td');
            imageCell.textContent = container.base_image;
            containerRow.appendChild(imageCell);

            const locationCell = document.createElement('td');
            locationCell.textContent = container.location;
            containerRow.appendChild(locationCell);

            const resourceCell = document.createElement('td');
            resourceCell.textContent = `${container.cpu_usage_percentage.toFixed(2)}%, ${container.memory_usage} / ${container.memory_limit}`;
        containerRow.appendChild(resourceCell);

        const actionCell = document.createElement('td');
        actionCell.innerHTML = `<button onclick="stopContainer('${container.id}')">停止</button>`;
        containerRow.appendChild(actionCell);

        document.querySelector('#containerStatusTable tbody').appendChild(containerRow);
        });

    // 模拟每秒更新数据
    setInterval(() => {
        // 模拟更新数据
        jsonData.forEach(container => {
            container.status = Math.random() > 0.5 ? 'running' : 'stopped'; // 随机更新状态
            container.cpu_usage_percentage = Math.random();
            container.memory_usage = (Math.random() * 2).toFixed(1) + "GB"; // 模拟内存使用量
        });

        jsonData.forEach(container => {
            const containerRow = document.querySelector(`#containerStatusTable tbody tr:nth-child(${jsonData.indexOf(container) + 1})`);
            containerRow.querySelector('td:nth-child(2)').textContent = container.status; // 更新状态单元格
            containerRow.querySelector('td:nth-child(6)').textContent = `${container.cpu_usage_percentage.toFixed(2)}%, ${container.memory_usage} / ${container.memory_limit}`; // 更新资源开销单元格
        });
    }, 1000);
    }

    // 停止容器
    function stopContainer(containerId) {
        // 在实际应用中，应该发送请求来停止容器，这里仅为演示
        alert(`停止容器 ${containerId}`);
    }

    // 显示日志查看
    function showLogView() {
        document.getElementById('mainContent').innerHTML = `
            <div class="container">
                <h2>日志查看</h2>
                <div id="logContent"></div>
            </div>
        `;

        // 模拟生成日志数据
        generateLogData();
    }


    // 更新通信链接状态
    function updateConnectionStatus() {
        const status = ['正常', '警告', '断开'][Math.floor(Math.random() * 3)];
        document.getElementById('connectionStatus').textContent = `通信链接：${status}`;
        document.getElementById('connectionStatus').style.color = status === '正常' ? 'green' : status === '警告' ? 'orange' : 'red';
    }

    // 模拟生成日志数据
    function generateLogData() {
        const logContent = document.getElementById('logContent');
        const fakeLogs = [
            { time: '08:00', message: '系统启动，开始接收卫星信号。' },
            { time: '09:00', message: '系统自检完成，所有模块运行正常。' },
            { time: '10:00', message: '成功同步卫星数据。' },
            { time: '11:00', message: '系统维护，更新软件包。' },
            { time: '12:00', message: '维护完成，系统性能优化。' },
            { time: '13:00', message: '检测到异常信号，已自动校正。' },
            { time: '14:00', message: '卫星通信链路稳定性检测。' },
            { time: '15:00', message: '地面站与卫星通信链路正常。' },
            { time: '16:00', message: '开始执行数据备份任务。' },
            { time: '17:00', message: '数据备份成功完成。' },
            { time: '18:00', message: '系统准备切换到夜间监控模式。' }
        ];

        fakeLogs.forEach(log => {
            const logLine = document.createElement('div');
            logLine.textContent = `[${log.time}] ${log.message}`;
            logContent.appendChild(logLine); // 使用appendChild而不是prepend
        });
    }

    // 简易命令行执行函数
    function executeCommand() {
        var input = document.getElementById('commandInput').value;
        // 在这里可以添加执行命令的逻辑
        console.log('执行命令:', input);
        // 清空输入框
        document.getElementById('commandInput').value = '';
        alert('命令已执行: ' + input);
    }

    // 在页面加载时更新通信链接状态
    updateConnectionStatus();

    // 初始显示默认内容，可以根据需要调整
    showSatelliteResources();

</script>
</body>
</html>